<template>
    <div class="advisory">
        <div class="advisory_head">
            {{dialogue.master.name}}为{{dialogue.user.userName}}解答
        </div>
        <div class="advisory_content" ref="cont">
            <div class="get_history">
                <span @click="getchatHistory()">{{getHis}}</span>
            </div>
            <div class="advisory_content1" id="content_f2"></div>
            <!-- <div class="right_msg">
                <p>2018/09/20 16:44:16</p>
                <div class="user_img">
                    <img src="@/assets/my/renzheng@2x.png" alt="">
                    <div class="msg">
                        我适合从事什么行业？我适合从事什么行业？我适合从事什么行业？我适合从事什么行业？
                        <i class="icon iconfont icon-shuaxin f24"></i>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="left_msg">
                <p>2018/09/20 16:44:16</p>
                <div class="user_img">
                    <img src="@/assets/my/renzheng@2x.png" alt="">
                    <div class="msg">
                        我适合从事什么行业？我适合从事什么行业？我适合从事什么行业？我适合从事什么行业？我适合从事什么行业？
                        <i class="icon iconfont icon-shuaxin f24"></i>
                    </div>
                    <div class="clear"></div>
                </div>
            </div> -->
        </div>
        <div class="advisory_foot" v-show="!isappraise & !ifPingJia">
            <div class="foot_import">
                <span class="way">  <!-- v-if="isVoice" @click="isVoice = !isVoice" -->
                    <i class="icon iconfont icon-jianpan f32"></i>
                </span>
                <!-- <span class="way" v-if="!isVoice" @click="isVoice = !isVoice">
                    <i class="icon iconfont icon-yuyin f32"></i>
                </span> -->
                <div class="inp"> <!-- v-if="!isVoice" -->
                    <textarea type="text" v-model="msg" @blur="changMsg(!isSend)" @focus="changMsg(!isSend)"></textarea>
                </div>
                <!-- <div class="inp pinp" v-if="isVoice" @touchstart="heandleBtnClick()" @touchend="cancel_mp3()">
                    <button>点击 说话</button>
                </div> -->
                <span class="operate" @click="changeoper(!isoper)" v-if="!isSend">
                    <i class="icon iconfont icon-zengjia"></i>
                </span>
                <span class="send" v-if="isSend" @click="sendMsgText()">发送</span>
            </div>
            <ul class="operation" v-show="isoper">
                <li class="operation_list">
                    <span>
                        <i class="icon iconfont icon-tupian"></i>
                        <input type="file" class="upImg" ref='upImg' @change="sendPrivateImg">
                    </span>
                    <b>图片</b>
                </li>
                <!-- <li class="operation_list">
                    <span>
                        <i class="icon iconfont icon-icons-wenjian"></i>
                        <input type="file" class="upImg" ref='upFile' @change="sendPrivateFile">
                    </span>
                    <b>文件</b>
                </li> -->
                <li class="operation_list" @click="finish(true)">
                    <span><i class="icon iconfont icon-fanhui"></i></span>
                    <b>结束服务</b>
                </li>
            </ul>
        </div>
        <div class="finish_mask" v-if="isFinish">
            <div class="finish">
                <h3>确定结束咨询？</h3>
                <div class="btn">
                    <span @click="finish(false)">取消</span>
                    <span @click="endOfConversation()">确定</span>
                </div>
            </div>
        </div>
        <div class="evaluate" v-show="isappraise">
            <span class="f30">服务评分:</span><rater :fontSize="16" activeColor="#E73828" :min="1" :max="5" v-model="value"></rater><span>{{value}}.0分</span>
            <div class="evaluate_label">
                <span class="f28">标签:</span>
                <!-- <checker type="checkbox" v-model="checkerArr" default-item-class='check' selected-item-class="check_selected">
                    <checker-item v-for="(val, ind) in checkerArr" :key="ind" :value="val" @on-item-click="onItemClick()" :disabled="false">
                        {{val}}
                    </checker-item>
                </checker> -->
                <ul>
                    <li class="f28" :class="checkArr.indexOf(val) !== -1 ? 'check_selected' : 'check'" v-for="(val, key) in checkerArr" :key="key" @click="checkLabel(val)">{{val}}</li>
                </ul>
            </div>
            <textarea class="remark" placeholder="请输入服务评语" v-model="remark"></textarea>
            <button class="send f26" @click="sendEvaluate()">发送</button>
        </div>
        <div class="comment evaluate" v-if="ifPingJia" v-for="(val, key) in evaluationRecords" :key="key">
            <span>服务评分:</span><rater :fontSize="16" activeColor="#E73828" :min="1" :max="5" v-model="value" :disabled="true"></rater><span>{{value}}.0分</span>
            <p class="user_remark">评价：{{val.userContent}}</p>
            <div class="user_remark_label" v-if="val.tag">
                <span class="user_remark_label_tit">标签:</span>
                <ul>
                    <li v-for="(i, k) in val.tag" :key="k">{{i}}</li>
                </ul>
                <div style="clear:both"></div>
            </div>
            <div class="master_remark" v-if="val.masterReply">
                <p class="master_remark_cont">
                    <i class="icon iconfont icon-tabshouqi1 f32"></i>
                    <span>{{val.masterName}}回复：</span>
                    {{val.masterReply}}
                </p>
            </div>
            <div class="remind1" v-if="($route.query.status == '待评价' | $route.query.status == '已完成')">订单已关闭，如有需要请重新下单</div>
        </div>
        <audio id="success" 
            src="@/assets/mp3/8858.mp3">
        </audio>
    </div>
</template>

<script>
    import {Rater, Checker, CheckerItem } from 'vux'
    export default {
        name: 'userAdvisory',
        components: {
            Rater,
            Checker,
            CheckerItem
        },
        data() {
            return {
                isoper: false,
                isSend: false,
                isFinish: false,
                msg: '',
                dialogue: { // 对话对象
                    master: {
                        userId: '',
                        name: '',
                        userPhoto: '',
                    },
                    user: {
                        userId: '',
                        userName: '',
                        userPhoto: '',
                    }
                },
                value: 5, // 评分
                isappraise: false,
                checkerArr: ['炒鸡耐心', '好评如潮', '有问必答', '名师高徒'],
                checkArr: [],
                remark: '',
                isVoice: false,
                evaluationRecords: [],
                ifPingJia: false,
                textareaVal: '',
                oldTime: new Date().getTime(),
                getHis: '查看更多',
                timerssss: null
            }
        },
        created() {
            
        },
        methods: {
            finish(bool) { // 结束服务
                this.isFinish = bool;
            },
            checkLabel(val) {
                if(this.checkArr.indexOf(val) == -1) {
                    this.checkArr.push(val)
                } else {
                    this.checkArr.splice(this.checkArr.indexOf(val), 1)
                }
            },
            endOfConversation() { // 结束服务
                let params = {
                    userId: this.$store.state.userId,
                    consultanceId: this.$route.query.ding
                }
                this.$http.fetchGet('endOfConversation', params).then(res => {
                    if(res.code == 200){
                        this.$vux.toast.text(res.msg)
                        this.isFinish = false
                        this.isappraise = true
                        this.quitRoom()
                        this.$router.push({
                            path: '/my'
                        })
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            sendEvaluate() { // 用户发送评价
                if(this.remark.replace(/\s+/g, "") != ''){
                    let params = {
                        userId: this.$store.state.userId, // 用户id
                        // userName: this.dialogue.user.userName, // 用户名字
                        userContent: this.remark, // 用户评论内容
                        masterId: this.dialogue.master.userId, // 大师id
                        // masterName: this.dialogue.master.name, // 大师名字
                        feedbackType: '6', // 类型
                        score: this.value, // 评分
                        tag: this.checkArr.join(','), // 标签
                        createTime: new Date().getTime(), // 创建时间
                        consultanceId: this.$route.query.ding
                    }
                    this.$http.fetchGet('getAddFeedback', params).then(res => {
                        if(res.code == 200) {
                            this.$vux.toast.text(res.msg)
                            this.ifEvaluate()
                            this.$router.push({
                                path: '/my'
                            })
                        } else {
                            this.$vux.toast.text(res.msg)
                        }
                    }, err => {
                        console.log(err)
                    })
                } else {
                    this.$vux.toast.text('请输入评价内容')
                }
            },
            scrollBar() {
                this.$refs.cont.scrollTop = this.$refs.cont.scrollHeight;
            },
            changeoper(bool) {
                this.isoper = bool
                console.log(this.isoper)
            },
            changMsg(bool) {
                // if(this.msg !== ''){
                    this.isSend = bool
                // } else {
                //     this.isSend = bool
                // }
            },
            getchatHistory() { //获取聊天记录
                let params = {
                    userId: this.dialogue.user.userId,
                    masterId: this.dialogue.master.userId,
                    endtime: `${new Date(this.oldTime).getFullYear()}/${new Date(this.oldTime).getMonth() + 1}/${new Date(this.oldTime).getDate()} ${new Date(this.oldTime).getHours()}:${new Date(this.oldTime).getMinutes()}:${new Date(this.oldTime).getSeconds()}`,
                    consultanceId: this.$route.query.ding
                }
                this.$http.fetchGet('getchatHistory', params).then(res => {
                    if(res.code == 200) {
                        let msgArr = res.data
                        if(msgArr.length <= 0) {
                            this.getHis = '没有更多记录'
                        } else {
                            this.oldTime = msgArr[0].chattime
                            console.log(this.oldTime)
                            msgArr.map((item, key) => {
                                if(item.chatFrom == this.dialogue.master.userId){//this.dialogue.master.userId
                                    let old_content = document.getElementById("content_f2").innerHTML;
                                    document.getElementById("content_f2").innerHTML = `<div class="left_msg">
                                        <p>${item.chattime}</p>
                                        <div class="user_img">
                                            <img src="${this.dialogue.master.userPhoto}" alt="">
                                            <div class="msg">
                                                ${item.msg}
                                                <i class="icon iconfont icon-shuaxin f24"></i>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                    </div>${old_content}`;
                                } else if ( item.chatFrom == this.$route.query.ding + '-' +this.dialogue.user.userId){//this.dialogue.user.userId
                                    let old_content = document.getElementById("content_f2").innerHTML;
                                    document.getElementById("content_f2").innerHTML = `<div class="right_msg">
                                        <p>${item.chattime}</p>
                                        <div class="user_img">
                                            <img src="${this.dialogue.user.userPhoto}" alt="">
                                            <div class="msg">
                                                ${item.msg}
                                                <i class="icon iconfont icon-shuaxin f24"></i>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                    </div>${old_content}`;
                                }
                            })
                        }
                    } else {

                    }
                }, err => {
                    console.log(err)
                })
            },
            acquireIM() { // 获取聊天用户
                if(this.$route.query.pj) {
                    this.isappraise = true
                }
                let params = {
                    userId: this.$store.state.userId,
                    consultanceId: this.$route.query.ding
                }
                this.$http.fetchGet('startim', params).then(res => {    
                    if(res.code == 200){
                        this.dialogue = res.data;
                        this.dialogue.master.userPhoto[0] == '/' ? this.dialogue.master.userPhoto.slice(1) : this.dialogue.master.userPhoto
                        this.dialogue.user.userPhoto[0] == '/' ? this.dialogue.user.userPhoto.slice(1) : this.dialogue.user.userPhoto
                        this.openIM(); // 连接IM
                        this.callBacks(); // IM回调
                        this.recorda(); // 获取评价
                        // this.ifEvaluate(); // 获取评价
                        let storage = window.localStorage;
                        let keys = this.dialogue.master.userId + '_' + this.dialogue.user.userId + '_' + this.$route.query.ding;
                        if(localStorage.getItem('record')) {
                            let getLocalData = localStorage.getItem('record');
                            let jsonObj = JSON.parse(getLocalData);
                            this.oldTime = jsonObj[keys][0].time ? jsonObj[keys][0].time : new Date().getTime()
                            console.log(this.oldTime)
                            if(jsonObj[keys]) {
                                jsonObj[keys].map((item, key) => {
                                    this.showContent(item.id, item.cont, item.type, 0, item.time, 0)
                                })
                            }
                        } else {
                            localStorage.setItem('record', JSON.stringify({}))
                        }
                        this.scrollBar();
                    } else {
                        // this.$router.back(-1)
                    }
                }, err => {
                    console.log(err)
                })
            },
            openIM() {
                let storage = window.localStorage;
                storage.removeItem('imtoken')
                let options = {
                    apiUrl: WebIM.config.apiURL,
                    user: this.$route.query.ding + '-' + this.dialogue.user.userId,
                    pwd: this.$route.query.ding + '-' + this.dialogue.user.userId,
                    accessToken: storage['imtoken'],
                    appKey: WebIM.config.appkey,
                    success: function (token) {
                        console.log(token)
                        // storage['imtoken'] = token.access_token;
                        // WebIM.utils.setCookie('webim_' + encryptUsername, token, 1);
                        console.log(" Token opened----->" + token);
                    },
                    error: function(){
                        console.log('Login error 连接失败');
                    }
                };
                this.$imConn.open(options);
                this.callBacks()
                // this.msg = `我是${this.dialogue.user.userName},现在可以沟通了` // 设置自动发送文本
                // this.sendMsgText()
            },
            saveChat(msgs) {
                let params = {
                    chatFrom: this.$route.query.ding + '-' +this.dialogue.user.userId,
                    chatTo: this.dialogue.master.userId,
                    msg: msgs
                }
                this.$http.fetchGet('saveChat', params).then((res) => {
                    if(res.code == 200)console.log( '成功拉')
                })
            },
            sendMsgText() { // 发送文本信息
                if(this.msg.replace(/(^s*)|(s*$)/g, "").length == 0){
                    this.$vux.toast.text('不能发送空白信息')
                } else {
                    let id = this.$imConn.getUniqueId(); // 生成本地id
                    let msg = new WebIM.message('txt', id);// 创建文本信息
                    msg.set({
                        msg: this.msg, // 消息内容
                        to: this.dialogue.master.userId, // 接受消息对象(用户id)
                        roomType: false,
                        success: function (id, serverMsgId) {
                            // console.log('send private text Success');
                        },
                        fail: function(e){
                            this.$vux.toast.text('发送失败')
                            // console.log("Send private text error");
                        }
                    })
                    msg.body.chatType = 'singleChat';
                    this.$imConn.send(msg.body);
                    this.showContent( this.dialogue.user.userId, this.msg, 2, 1, 0);
                    this.saveChat(this.msg)
                    this.msg = "";
                    this.scrollBar()
                    this.isoper = false
                }
            },
            sendPrivateImg() { // 发送图片
                let id = this.$imConn.getUniqueId() // 生成本地消息id
                let msg = new WebIM.message('img', id) // 创建图片信息
                let input = this.$refs.upImg // 选择图片的input
                let file = WebIM.utils.getFileUrl(input) // 讲图片转化为二进制文件
                let allowType = {
                    'jpg': true,
                    'gif': true,
                    'png': true,
                    'bmp': true,
                    'zip': true,
                    'txt': true,
                    'doc': true,
                    'pdf': true
                }
                if (file.filetype.toLowerCase() in allowType) {
                    var option = {
                        apiUrl: WebIM.config.apiURL,
                        file: file,
                        to: this.dialogue.master.userId, // 接收消息对象
                        roomType: false,
                        chatType: 'singleChat',
                        onFileUploadError: function () { // 消息上传失败
                            this.$vux.toast.text('图片发送失败')
                        },
                        onFileUploadComplete: function () { // 消息上传成功
                            console.log('onFileUploadComplete');
                        },
                        success: function () { // 消息发送成功
                            console.log('Success');
                        },
                        flashUpload: WebIM.flashUpload
                    };
                    msg.set(option);
                    this.$imConn.send(msg.body);
                    this.showContent( this.$store.state.userId, "<img class='img' src='" + msg.value.url + "' width='50'>", 2, 1, 0);
                    this.saveChat('[图片]')
                }
            },
            sendPrivateFile() {
                let id = this.$imConn.getUniqueId(); // 生成本地消息id
                let msg = new WebIM.message('file', id); // 创建文件消息
                let input = this.$refs.upFile;  // 选择文件的input
                let file = WebIM.utils.getFileUrl(input); // 将文件转化为二进制文件
                let allowType = {
                    'jpg': true,
                    'gif': true,
                    'png': true,
                    'bmp': true,
                    'zip': true,
                    'txt': true,
                    'doc': true,
                    'pdf': true
                };
                if (file.filetype.toLowerCase() in allowType) {
                    let option = {
                        apiUrl: WebIM.config.apiURL,
                        file: file,
                        to: this.dialogue.user.userId,                       // 接收消息对象
                        roomType: false,
                        chatType: 'singleChat',
                        onFileUploadError: function () {      // 消息上传失败
                            console.log('onFileUploadError');
                        },
                        onFileUploadComplete: function () {   // 消息上传成功
                            console.log('onFileUploadComplete');
                        },
                        success: function () {                // 消息发送成功
                            console.log('Success');
                        },
                        flashUpload: WebIM.flashUpload
                    };
                    msg.set(option);
                    this.$imConn.send(msg.body);
                    let fileData = `<div class="files">
                            <div class="file_type">${msg.value.filetype}</div>
                            <p class="file_name">${msg.value.filename}</p>
                            <span class="file_da">1kb</span>
                        </div>`
                    this.showContent( this.$store.state.userId, fileData, 2, 1, 0);
                }
            },
            showContent(people, content, type, bool, timesss) { //在页面显示聊天内容
                let storage = window.localStorage;
                let times = timesss ? new Date(timesss) : new Date()
                let times1 = `${times.getFullYear()}/${times.getMonth() + 1}/${times.getDate()} ${times.getHours()}:${times.getMinutes()}:${times.getSeconds()}`
                // let times2 = `${times.getFullYear()}-${times.getMonth()}-${times.getDate()}`
                var old_content = document.getElementById("content_f2").innerHTML;
                let keys = this.dialogue.master.userId + '_' + this.dialogue.user.userId + '_' + this.$route.query.ding;
                this.dialogue.master.userPhoto = this.dialogue.master.userPhoto[0] == '/' ? this.dialogue.master.userPhoto.slice(1) : this.dialogue.master.userPhoto
                this.dialogue.user.userPhoto = this.dialogue.user.userPhoto[0] == '/' ? this.dialogue.user.userPhoto.slice(1) : this.dialogue.user.userPhoto
                if(localStorage.getItem('record')){
                    if(localStorage.getItem('record') !== 'undefined') {
                        let getLocalData = localStorage.getItem('record')
                        let jsonObj = JSON.parse(getLocalData);
                        if(!jsonObj[keys]) {
                            jsonObj[keys] = []
                        }
                        jsonObj[keys].push({
                            id: people,
                            cont: content,
                            type: type,
                            time: new Date().getTime()
                        })
                        var str_jsonData = JSON.stringify(jsonObj);
                    } 
                }else {
                    storage.setItem('record', '{}')
                }
                if(bool){
                    storage.setItem('record', str_jsonData)
                }
                if(type == 1){
                    document.getElementById("content_f2").innerHTML = `${old_content}<div class="left_msg">
                        <p>${times1}</p>
                        <div class="user_img">
                            <img @error="$event.target.src = require('@/assets/my/headImg.png')" src="${this.dialogue.master.userPhoto}" alt="">
                            <div class="msg">
                                ${content}
                                <i class="icon iconfont icon-shuaxin f24"></i>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>`;
                } else if ( type == 2){
                    document.getElementById("content_f2").innerHTML = `${old_content}<div class="right_msg">
                        <p>${times1}</p>
                        <div class="user_img">
                            <img src="${this.dialogue.user.userPhoto}" alt="">
                            <div class="msg">
                                ${content}
                                <i class="icon iconfont icon-shuaxin f24"></i>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>`;
                }
            },
            callBacks() {
                let _this = this;
                this.$imConn.listen({
                    onError: function ( message ) { //失败回调
                        // this.$vux.toast.text(message)
                        console.log('连接失败')
                    },
                    onOpened: function( message ) {
                        console.log('连接成功')
                        this.$imConn.setPresence();
                    },
                    onTextMessage: function ( message ) { //收到文本消息
                        console.log(message)
                        _this.showContent( message.from, message.data, 1, 1, 0)
                        _this.scrollBar()
                        _this.playAudio()
                    },
                    onPictureMessage: function (message) { //收到图片消息
                        console.log(message);
                        var pic = message.url;
                        _this.showContent(message.from, "<img class='img' src='" + pic + "' width='50'>", 1, 1, 0);
                        _this.scrollBar()
                        _this.playAudio()
                    },
                    onClosed: function (message) { //连接关闭回调
                        this.$vux.toast.text('连接关闭')
                        console.log("closed");
                    },
                    onOnline: function () { //本机网络连接成功
                        this.$vux.toast.text('本机网络连接成功')
                        // console.log("Is online");
                    },
                    onOffline: function () { //本机网络掉线
                        this.$vux.toast.text('本机网络掉线')
                        // console.log("Is offline");
                    },
                    onReceivedMessage: function (message) { //收到消息送达服务器回执
                        console.log("message is arrived server")
                    },
                    onDeliveredMessage: function (message) { //收到消息送达客户端回执
                        console.log("message is arrived partner");
                    },
                    onFileMessage: function ( message ) {
                        console.log(message)
                        let fileData = `<div class="files">
                                <div class="file_type">1</div>
                                <p class="file_name">1</p>
                                <span class="file_da">1kb</span>
                            </div>`
                        this.showContent( this.$store.state.userId, fileData, 2, 1, 0);
                    },
                });
            },
            quitRoom() { // 退出聊天室
                this.msg = '用户已经结束服务,感谢您的解答。';
                this.sendMsgText()
                this.$imConn.listen({
                    onClosed: function (message) { //连接关闭回调
                        console.log(message);
                    },
                })
            },
            ifEvaluate() {
                let params = {
                    id: this.$route.query.ding, // 大师id
                    userId: this.$store.state.userId, // 用户id
                    limit: '1', // 显示条数
                    offset: '0', // 偏移量
                    feedbackType: '6' // 类型
                }
                this.$http.fetchGet('getFeedback', params).then(res => {
                    if(res.code == 200) {
                        if(res.data[0]) {
                            this.evaluationRecords = res.data;
                            this.value = res.data[0].score*1;
                            if(this.evaluationRecords[0].tag) {
                                this.evaluationRecords[0].tag = this.evaluationRecords[0].tag.split(',')
                            }
                        }
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            onItemClick (itemValue, itemDisabled) {
                console.log(itemValue, itemDisabled);
            },
            recorda() {
                let que = this.$route.query.status
                if(que == '已完成') {
                    this.ifPingJia = true
                    this.ifEvaluate()
                }
            },
            setTimer() {
                this.timerssss = setInterval(() => {
                    this.$http.fetchGet('IMheartbeat', {
                        consultanceId: this.$route.query.ding,
                        userId: this.$store.state.userId
                    }).then(res => {
                        
                    })
                }, 10000)
            },
            playAudio() {
                let yin = document.getElementById('success');
                yin.play();
                console.log('响')
            }
        },
        mounted() {
            this.acquireIM();
            if(this.$route.query.status == '进行中'){
                clearInterval(this.timerssss)
                this.setTimer()
            }
        },
        destroyed() {
            location.reload()
            this.$imConn.listen({
                onClosed: function (message) { //连接关闭回调
                    console.log('Closed');
                    this.$forceUpdate()
                },
            })
            if(this.$route.query.status == '进行中'){
                clearInterval(this.timerssss)
            }
        }
    }
</script>

<style lang="less">
    .advisory{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
        .advisory_head{
            width: 100%;
            .h(74);
            .lh(74);
            text-align: center;
            background: #F2F2F2;
        }
        .advisory_content{
            flex: 1;
            overflow-y: scroll;
            .get_history{
               width: 100%;
               text-align: center;
               .lh(88);
               span{
                  color: #189BEB;
               }
            }
            .clear{
                clear:both;
            }
            .left_msg{
                width: 100%;
                .padd(10, 20);
                .pb(40);
                box-sizing: border-box;
                p{
                    text-align: center;
                }
                .user_img{
                    .mt(20);
                    .pl(92);
                    min-height: 64px;
                    position: relative;
                    img{
                        .w(92);
                        .h(92);
                        border-radius: 50%;
                        position: absolute;
                        left: 0px;
                    }
                    .msg{
                        max-width: 248px;
                        .p(20);
                        .ml(20);
                        box-sizing: border-box;
                        background: #f2f2f2;
                        border-radius: 5px;
                        .lh(40);
                        float: left;
                        position: relative;
                        i.icon{
                            position: absolute;
                            right: -20px;
                            top: 50%;
                            color: #999;
                            transform: translateY(-50%);
                            transform-origin: 100% 50%;
                            opacity: 0;
                        }
                        .img{
                            width: auto;
                            height: auto;
                            max-width: 100%;
                            display: inline-block;
                            position: relative;
                            border-radius: 0;
                        }
                        .files{
                            .w(450);
                            .h(130);
                            border-radius: 8px;
                            position: relative;
                            .pl(150);
                            box-sizing: border-box;
                            .file_type{
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                .w(130);
                                .h(130);
                                .lh(130);
                                text-align: center;
                                font-size: 24px;
                                display: inline-block;
                                font-family: fantasy;
                                font-size:26px;
                                background: #999;
                                // background-image: -webkit-linear-gradient(bottom, rgb(201, 115, 255), rgb(20, 11, 255));
                                // -webkit-background-clip: text;
                                // -webkit-text-fill-color: transparent;
                                // border: 1px solid #189BEB;
                            }
                            .file_name{
                                width: 100%;
                                .h(40);
                                display: inline-block;
                                .lh(40);
                                font-size: 16px;
                                text-align: left;
                            }
                            .file_da{
                                position: absolute;
                                bottom: 7px;
                            }
                        }
                    }
                }
            }
            .right_msg{
                width: 100%;
                .padd(10, 20);
                box-sizing: border-box;
                p{
                    text-align: center;
                }
                .user_img{
                    .mt(20);
                    .pr(92);
                    position: relative;
                    img{
                        .w(92);
                        .h(92);
                        border-radius: 50%;
                        position: absolute;
                        right: 0px;
                    }
                    .msg{
                        max-width: 248px;
                        .p(20);
                        box-sizing: border-box;
                        background: #189BEB;
                        border-radius: 5px;
                        float: right;
                        color: #fff;
                        .mr(20);
                        .lh(40);
                        position: relative;
                        i.icon{
                            position: absolute;
                            left: -20px;
                            top: 50%;
                            color: #999;
                            transform: translateY(-50%);
                            transform-origin: 100% 50%;
                            opacity: 0;
                        }
                        .img{
                            display: inline-block;
                            position: relative;
                            border-radius: 0;
                        }
                        .files{
                            .w(450);
                            .h(130);
                            border-radius: 8px;
                            position: relative;
                            .pl(150);
                            box-sizing: border-box;
                            .file_type{
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                .w(130);
                                .h(130);
                                .lh(130);
                                text-align: center;
                                font-size: 24px;
                                display: inline-block;
                                font-family: fantasy;
                                font-size:26px;
                                background: #999;
                                // background-image: -webkit-linear-gradient(bottom, rgb(201, 115, 255), rgb(20, 11, 255));
                                // -webkit-background-clip: text;
                                // -webkit-text-fill-color: transparent;
                                // border: 1px solid #189BEB;
                            }
                            .file_name{
                                width: 100%;
                                .h(40);
                                display: inline-block;
                                .lh(40);
                                font-size: 16px;
                                text-align: left;
                            }
                            .file_da{
                                position: absolute;
                                bottom: 7px;
                            }
                        }
                    }
                }
            }
        }
        .advisory_foot{
            // .h(88);
            border-top: 1px solid #f2f2f2;
            box-sizing: border-box;
            .foot_import{
                display: flex;
                .padd(10, 20);
                // .pb(10);
                .way{
                    .w(60);
                    .h(60);
                    .lh(60);
                    text-align: center;
                    border-radius: 50%;
                    color: #999;
                    position: relative;
                    bottom: 0px;
                    i.icon{
                        display: inline-block;
                        transform: scale(1.8);
                    }
                }
                .inp{
                    flex: 1;
                    .padd(0, 20);
                    box-sizing: border-box;
                    position: relative;
                    textarea{
                        width: 100%;
                        box-sizing: border-box;
                        outline:none;
                        border: none;
                        border-bottom: 1px solid #999;
                        resize:none;
                        overflow-y: scroll; 
                        &:focus {
                            outline: none;
                            border-bottom: 1px solid #189BEB;
                        }
                    }
                    button{
                        width: 100%;
                        .h(70);
                        color: #666;
                        border: none;
                        border-radius: 3px;
                        background: #fff;
                        border: 1px solid #999;
                    }
                }
                .pinp{
                    .pl(40);
                    touch-callout:none;
                }
                .operate{
                    .w(60);
                    .h(60);
                    .lh(60);
                    text-align: center;
                    border: 1px solid #999;
                    border-radius: 50%;
                    color: #999;
                    position: relative;
                    box-sizing: border-box;
                    // top: 3px;
                }
                .send{
                    position: relative;
                    top: 3px;
                    border: 1px solid #189BEB;
                    text-align: center;
                    box-sizing: border-box;
                    border-radius: 5px;
                    color: #fff;
                    background: #189BEB;
                    .w(80);
                    .h(60);
                    .lh(60);
                }
            }
            .operation{
                display: flex;
                flex-wrap: wrap;
                border-top: 1px solid #f2f2f2;
                .h(201);
                .padd(0, 20);
                .pt(20);
                box-sizing: border-box;
                overflow-y: scroll;
                .operation_list{
                    .w(150);
                    .h(180);
                    span{
                        position: relative;
                        display: block;
                        .w(100);
                        .h(100);
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        margin: 0 auto;
                        .mt(10);
                        text-align: center;
                        .lh(100);
                        i{
                            font-size: 36px;
                            color: #999;
                        }
                        .upImg{
                            .w(100);
                            .h(100);
                            overflow: hidden;
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                        }
                    }
                    b{
                        display: block;
                        text-align: center;
                        .lh(50);
                        color: #999;
                    }
                }
            }
        }
        .finish_mask{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .finish{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(500);
                .h(350);
                background: #fff;
                border-radius: 5px;
                h3{
                    text-align: center;
                    font-weight: normal;
                    .lh(200);
                }
                .btn{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        border-top: 1px solid #f2f2f2;
                        &:nth-child(2){
                            border-left: 1px solid #f2f2f2;
                            color: #189BEB;
                        }
                    }
                }
            }
        }
        .evaluate{
            width: 100%;
            .padd(20, 20);
            box-sizing: border-box;
            border-top: 1px solid #f2f2f2;
            .evaluate_label{
                width: 100%;
                display: flex;
                .mt(10);
                span{
                    .w(90);
                    display: inline-block;
                    .lh(36);
                    float: left;
                }
                ul{
                    // width: 100%;
                    float: left;
                    .ml(10);
                    li{
                        float: left;
                        border: 1px solid #ccc;
                        .padd(4,6);
                        border-radius: 5px;
                        .mr(10);
                        .mb(10);
                    }
                }
                .check{
                    border: 1px solid #fff;
                }
                .check_selected{
                    border-color: #189BEB;
                    color: #189BEB;
                    .mr(10);
                    .mb(10);
                }
            }
            .remark{
                width: 100%;
                box-sizing: border-box;
                .h(120);
                border: none;
                border: 1px solid #f2f2f2;
                .p(10);
                .mt(10);
                resize:none;
                outline: none;
            }
            .send{
                width: 100%;
                .h(88);
                .mt(20);
                border: none;
                background: #189BEB;
                color: #fff;
                border-radius: 5px;
            }
            .remind1{
                text-align: center;
                .lh(88);
            }
        }
        .comment{
            .padd(0, 20);
            .pb(20);
            .pt(20);
            box-sizing: border-box;
            .user_remark{
                .lh(60);
            }
            .master_remark{
                min-width: 0;
                .master_remark_cont{
                    .p(10);
                    .lh(60);
                    border-radius: 5px;
                    background: #eff9ff;
                    position: relative;
                    i.icon{
                        color: #eff9ff;
                        position: absolute;
                        top: -18px;
                        left: 10px;
                    }
                }
            }
            .user_remark_label{
                border-bottom: 1px solid #f2f2f2;
                .user_remark_label_tit{
                    display: inline-block;
                    float: left;
                    .lh(40);
                }
                ul{
                    float: left;
                    .ml(10);
                    li{
                        float: left;
                        border: 1px solid #189BEB;
                        background: #189BEB;
                        .padd(4,6);
                        border-radius: 5px;
                        .mr(10);
                        .mb(10);
                        color: #fff;
                    }
                }
            }
        }
    }
</style>
